<!--此组件用于小标题-->

<template>
    <div class="lbCardItem"> 
          <div class="aLine" @click="goLbDetails">
            <div class="logo_header">
              <div :class="[tradeType==1?'buleBgc':'redbgc','logo_header_left']">
                <span v-if="tradeType==1">
                  <!-- 询价 -->
                  <span v-if="status==1">询价中</span>
                  <span v-else-if="status==3">待成交</span>
                  <span v-else-if="status==4">已成交</span>
                  <span v-else-if="status==5">已流拍</span>
                </span>
                <span v-else>
                   <!-- 竞价 -->
                    <span v-if="status==1">报名中</span>
                    <span v-else-if="status==2">进行中</span>
                    <span v-else-if="status==3">竞价结束</span>
                    <span v-else-if="status==4">已成交</span>
                    <span v-else-if="status==5">已流拍</span>
                </span>
              </div>
              <!-- <div style="flex: 1; padding-left: 5px; font-size: 12px;" class="ng-star-inserted">距开始：1天22小时29分钟</div> -->
            </div>
            <div class="logo_w">
              <div class="log_img">
                <img :src="image" style="width: 100%; height: 220px;" alt="">
              </div>
            </div>
            <div class="logo_content_title luban-text-overflowHidden">{{recyclingTitle}}</div>
            <div class="logo_content_center">
              <div style="width: 100px;">发布单位</div>
              <div class="luban-text-overflowHidden" style="flex: 1;">{{companyName}}</div>
            </div>
            <!-- <div class="logo_content_center">
              <div style="width: 100px;">初始价</div>
              <div style="flex: 1; color: red;">
                <span class="fb ng-star-inserted">登录后查看</span>
              </div>
            </div> -->
            <div class="logo_content_center">
              <div style="width: 100px;">报名截止时间</div>
              <div class="fb" style="flex: 1; color: red;">{{enrollDeadline}}</div>
            </div>
            <div class="logo_content_footer">
              <div class="luban-text-overflowHidden" style="flex: 1;">
                <i class="el-icon-location-outline"></i>
                {{provinceName+cityName}} 
              </div>
              <div style="width: 100px; text-align: center;">
                <button class="ant-btn" @click="goLbDetails">查看详情</button>
                <!-- <button v-else class="ant-btn" @click="goLbDetails">登录后查看</button> -->
              </div>
            </div>







          </div>
       
    </div>
  </template>
  
  <script>
   import {getUserInfoID} from '@/utils/auth'
  export default {
    props: {
      image:{
				type: String,
				default: ''
			},
      recyclingTitle:{
				type: String,
				default: ''
			},
      companyName:{
				type: String,
				default: ''
			},
      enrollDeadline:{
				type: String,
				default: ''
			},
      provinceName:{
				type: String,
				default: ''
			},
      cityName:{
				type: String,
				default: ''
			},
      tradeType:[String,Number],
      status:[String,Number],
      id:[String,Number],
    },
    data(){
      return{
        uid:null
      }
    },
    created(){
        var info = getUserInfoID();
        if(info){
            this.uid = JSON.parse(info).id;
        }else{
            this.uid = null;
        }
    },
    methods:{
      goLbDetails(){
        this.$emit('goParentDetails',this.id);
      }
    }
  };
  </script>

<style lang="less" scoped>
  .lbCardItem{
    position: relative;
    display: inline-block;
    width: 285px;
    height: 386px;
    border: 1px solid #eee;
    .buleBgc{
      background-color: #1890ff;
    }
    .redbgc{
      background-color: #e50012;
    }
    
    // .link_wrap:hover{
      // border: 2px solid #67C23A;
    // }
    .fb {
      font-weight: 700;
    }
    .aLine{
      color: #1890ff;
      text-decoration: none;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: color .3s;
      -webkit-text-decoration-skip: objects;
    }
      .logo_header{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 28px;
        line-height: 28px;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        display: flex;
        font-size: 14px;
        .logo_header_left{
          width: 80px;
          padding-left: 5px;
          border-bottom-right-radius: 50px;
        }
      }
      .logo_w{
        width: 100%;
        height: 220px;
        display: table;
        overflow: hidden;
        .log_img{
          width: 285px;
          height: 220px;
          img{
            object-fit: cover;
          }
        }
      }
      .logo_content_title{
        padding: 0 5px;
        font-size: 18px;
        color: #333;
        height: 22px;
        line-height: 20px;
        margin-top: 10px;

      }
      .luban-text-overflowHidden {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: keep-all;
      }
      .logo_content_center {
        font-size: 14px;
        font-weight: 400;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        padding: 0 5px;
        margin-top: 10px;
        display: flex;
        color: #333;
      }
      .logo_content_footer {
        font-size: 14px;
        padding: 0 5px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        line-height: 30px;
        color: #333;
        display: flex;
      }
      .ant-btn{
        height: 24px;
        padding: 0 7px;
        font-size: 14px;
        border-radius: 2px;
        color: #fff;
        border:none;
        background: #ff4d4f;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
        box-shadow: 0 2px #0000000b;
        cursor: pointer;
      }
      .ant-btn:hover{
        background: #f87679;
      }   
    
      // .item_card:hover{
      //     border: 1px solid #DF0000;
      //   }

      
      
  }

</style>
  